<template>
  <div style="padding: 20px">
    <div style="text-align: center;margin: 20rpx;">你好呀，这次一定发！</div>
    <div style="display: flex; justify-content: space-between">
      <van-button style="margin: 0 auto;" @click="showPopup = true" plain type="primary">接入房间</van-button>
    </div>
    <van-dialog
      :show="showPopup"
      title="标题"
      show-cancel-button
      @confirm="confirmHandler"
      @cancel="showPopup = false"
    >
      <div style="text-align: center; margin: 10px 0">加入房间</div>
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field
          v-model="roomValue"
          label="房间号"
          placeholder="请输入房间号"
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const showPopup = ref(false);
const roomValue = ref("");

const confirmHandler = () => {
  uni.navigateTo({ url: `/pages/game/index?roomId=${roomValue.value}` });
};

onMounted(() => {
  const token = uni.getStorageSync("cxl_token");
  if (!token) uni.reLaunch({ url: "/pages/login/index" });
});
</script>

<style lang="less" scoped>
</style>